 window.onload = function() {
     var MovePicture = document.getElementById('MovePicture'),
         Picture = document.getElementById('Picture').getElementsByTagName("li"),
         Nums = document.getElementById('Nums').getElementsByTagName('li'),
         index = 0,
         play = null;

     // 定义并调用自动播放函数
     play = setInterval(autoPlay, 2000);

     // 鼠标划过整个容器时停止自动播放
     MovePicture.onmouseover = function() {
         clearInterval(play);
     }

     // 鼠标离开整个容器时继续播放至下一张
     MovePicture.onmouseout = function() {
         play = setInterval(autoPlay, 2000);
     }
     // 遍历所有数字导航实现划过切换至对应的图片
     for (var i = 0; i < Nums.length; i++) {
         Nums[i].onmouseover = function() {
             clearInterval(play);
             index = this.innerText - 1;
             changePic(index);
         };
     };

     function autoPlay() {
         if (++index >= Picture.length) index = 0;
         changePic(index);
     }

     // 定义图片切换函数


     function changePic(curIndex) {
         for (var i = 0; i < Picture.length; ++i) {
             Picture[i].style.display = "none";
             Nums[i].className = "";
         }
         Picture[curIndex].style.display = "block";
         Nums[curIndex].className = "on";
     }

     var userbtn = document.getElementsByTagName('button');
     var divs = document.getElementById('divs').getElementsByTagName('div');
     for (var i = 0; i < userbtn.length; i++) {
         userbtn[i].index = i;
         userbtn[i].onclick = function() {
             for (var j = 0; j < userbtn.length; j++) {
                 userbtn[j].className = "";
             }
             this.className = "reed";
             for (var i = 0; i < divs.length; i++) {
                 divs[i].style.display = "none";
             }
             divs[this.index].style.display = "block";
         }
     }
 };
